<template>
  <v-ace-editor
    v-model:value="model"
    v-bind="props"
    class="text-xl"
    :style="{
      height: props.height ? props.height + 'px' : '350px',
    }"
  />
</template>
<script lang="ts" setup>
import { VAceEditor } from "vue3-ace-editor";
import "./ace-config.ts";
const model = defineModel<string>({ required: true });

const props = withDefaults(
  defineProps<{
    lang?: string;
    theme?: string;
    readonly?: boolean;
    height?: number;
  }>(),
  {
    lang: "javascript",
    theme: "monokai",
    readonly: true,
  }
);
</script>

<style lang="scss" scoped>
/** 滚动条样式 */
:deep(.ace_scrollbar.ace_scrollbar-h) {
  height: 6px !important;
  opacity: 0.6;
}
</style>
